<!--
 * @Author: atao
 * @Date: 2023-10-23 16:20:43
 * @LastEditTime: 2023-10-27 11:45:02
 * @FilePath: \三阶段项目\pili-pili-app\src\pages\mine\index.vue
-->
<template>
  <div class="mine-box">
    <header>
      <div class="top">
        <div class="right">
          <span class="iconfont icon-touping"></span>
          <span class="iconfont icon-saoma"></span>
          <span class="iconfont icon-yifu"></span>
          <span class="iconfont icon-yueliang"></span>
        </div>
      </div>
      <div class="center">
        <div class="user-img">
          <img :src=head alt="" />
        </div>
        <div class="user-name">
          <p>{{name}}<span class="iconfont icon-PC"></span></p>
          <p><span>正式会员</span></p>
          <p>B币:0.0 硬币:0</p>
        </div>
        <div class="user-right">
          <p @click="userOut">退出 &gt;</p>
        </div>
      </div>
      <div class="footer">
        <div>20<span>动态</span></div>
        <div>10<span>关注</span></div>
        <div>1<span>粉丝</span></div>
      </div>
    </header>
    <main>
        <ul class="m-top">
            <li @click="toAdress">
                <span class="iconfont icon-lixianhuancun"></span>
                我的地址
            </li>
            
            <li>
                 <span class="iconfont icon-shouye"></span>
                 历史记录
            </li>
            <li>
                 <span class="iconfont icon-wodeshoucang"></span>
                 我的收藏
            </li>
            <li>
                 <span class="iconfont icon-shaohouzaikanx"></span>
                 稍后再看
            </li>
        </ul>
        <p class="bg"></p>
      <b>推荐服务</b>
      <ul class="recom">
        <li>
           <span class="iconfont icon-kecheng"></span>
                我的课程
        </li>
         <li>
                <span class="iconfont icon-dianhuaqia"></span>
                免流量服务
            </li>
             <li>
                <span class="iconfont icon-yifu"></span>
               个性装扮
            </li>
        <li>
           <span class="iconfont icon-hongbao"></span>
                赚红包
        </li>
          <li>
           <span class="iconfont icon-qianbao"></span>
                我的钱包
        </li>
        <li>
           <span class="iconfont icon-youxi"></span>
                游戏中心
        </li>
           <li>
           <span class="iconfont icon-huiyuangouzhongxinx"></span>
                会员购中心
        </li>
        <li>
           <span class="iconfont icon-zhibo"></span>
                我的直播
        </li>
           <li>
           <span class="iconfont icon-dengpao"></span>
                创作中心
        </li>
        <li>
           <span class="iconfont icon-shequzhongxin"></span>
                社区中心
        </li>
           <li>
           <span class="iconfont icon-gongyi"></span>
                哔哩哔哩公益
        </li>
        <li>
           <span class="iconfont icon-jiayouzhan"></span>
                能量加油站
        </li>
         <li>
           <span class="iconfont icon-zhaoxiangji"></span>
                时光照相机
        </li>
      </ul>
      <b>更多服务</b>
      <ul class="more">
        <li><span class="iconfont icon-kefu"></span>联系客服</li>
        <li><span class="iconfont icon-18erji-1"></span>听视频</li>
        <li><span class="iconfont icon-shouhoufuwu"></span>青少年守护</li>
        <li><span class="iconfont icon-shezhi"></span>设置</li>
      </ul>
    </main>
  </div>
</template>
<style lang="less" scoped>
@import "../../style/common.less";

.mine-box {
  .rel();

  header {
    position: relative;
   
  }
  .top {
    height: 2rem;
    line-height: 2rem;
    vertical-align: bottom;
    padding-left: 0.4667rem;
    padding-right: 0.4267rem;
    .right {
      color: @b5;
      float: right;
      span {
        margin-left: 10px;
      }
      .iconfont{
        font-size: 23px;
      }
    }
  }
  .center {
    width: 100%;
    height: 80px;
    display: flex;
    .user-img {
      margin: 0 10px;

      flex: 0 0 80px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user-name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p {
        font-size: 16px;
      }
      p:nth-child(1) {
        color: @g13;
        font-weight: 600;
        span {
          font-weight: 300px;
          font-size: 20px;
        }
      }
      p:nth-child(2) {
        span {
          font-size: 14px;
          padding: 2px;
          border: 1px solid;
          color: @b7;
        }
      }
      p:nth-child(3) {
        color: @g07;
      }
    }
    .user-right {
      text-align: center;
      line-height: 80px;
      font-size: 16px;
      margin-right: 20px;
      color: @g07;
    }
  }
  .footer {
    display: flex;
    width: 100%;
    margin-top: 20px;
    height: 50px;
    div {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: @g10;
      span {
        display: block;
        color: @g07;
        position: relative;
        &:after {
          content: "";
          display: block;
          position: absolute;
          top: -8px;
          left: -5px;
          bottom: 9px;
          right: -5px;
          border-right: 1px solid #ccc;
        }
      }
    }
  }
  main{
    display: block;
    overflow-x: hidden;
    height: calc(100% - 300px);//减号两边必须加空格
    padding-top: 10px;
    .m-top{
        font-size: 16px;
        display: flex;
        justify-content: space-around;
        text-align: center;
        li{
          color: @g10;
            display: flex;
            flex-direction: column;
        }
    }
    .bg{
        margin: 10px ;
        height: 50px;  
        background: url(https://img1.baidu.com/it/u=3210140770,3142534080&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500) 50px 50px;
        background-size: 100%;
      
    }
    b{
      display: block;
      margin: 10px;
      font-size: 16px;
    }
    .recom{
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      
      li{
        display: flex;
        flex-direction: column;   
       color: @g10;
        flex: 0 0 25%;
        height: 70px;
      }
    }
    .more{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 10px;
      font-size: 16px;
     
      li{
        height: 40px;
        line-height:40px;
        color: @g10;
        span{
          vertical-align:middle;
          display: inline-block;
          margin: 0 20px;
          
        }
        &::after{
          content: ">";
          float: right;
          margin-right: 15px;
          font-size: 20px;
          color: @g10;
        
      }
      }
      
    }
  }
}
.iconfont {
  font-size: 30px;
  color: @b5;
  font-weight: 300;
}


</style>
<script lang="ts" setup>
// import { headhApi } from "../../apis/userApis";
import { ref } from "vue";
import { AUTO_LOGIN, GET_HEAD, GET_NAME } from "../../config/common.cfg";
import { useRouter } from "vue-router";
function toAdress(){
  router.push('/mine/adress')
}


const router=useRouter()
function userOut(){
   localStorage.removeItem(AUTO_LOGIN)
   localStorage.removeItem(GET_HEAD)
   localStorage.removeItem(GET_NAME)
   alert('确认退出？')
   router.push('/login')
}
const target=ref('http://www.yszhsc.com:15666')
let header=ref(localStorage.getItem(GET_HEAD))
let name=ref(localStorage.getItem(GET_NAME))
let head=ref()
head.value=target.value+header.value

  // let img:any=ref()
//  const token=localStorage.getItem(AUTO_LOGIN)
//  console.log(token)
//        headhApi(token).then(
//          (res:any)=>{
//           img=res
//          }
//        )
//         console.log(img)
</script>